<template>
    <section>
        <el-table
                v-loading="loading"
                :data="tableData"
                row-key="id"
                border
        >
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-table
                            :data="props.row.menus"
                            border
                    >
                        <el-table-column
                                prop="name"
                                label="子菜单名称"
                        >
                        </el-table-column>
                        <el-table-column
                                label="菜单类型">
                            <template slot-scope="scope">
                                <span v-if="scope.row.type === 'view'">连接</span>
                                <span v-else-if="scope.row.type === 'click'">点击</span>
                                <span v-else-if="scope.row.type === 'miniprogram'">小程序</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="状态">
                            <template slot-scope="scope">
                                <span v-if="scope.row.open === 1">开启</span>
                                <span v-else-if="scope.row.open === 0">关闭</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleMenus(scope.$index, scope.row)" icon="el-icon-edit">编辑
                                </el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="底部菜单名称"
            >
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleMenu(scope.$index, scope.row)" icon="el-icon-edit">编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <br/>
        <el-button style="margin-left:40%;" :loading="addLoading" @click="createMenus()">生成菜单</el-button>
        <!--底部菜单编辑-->
        <el-dialog title="底部菜单" :visible.sync="addFormVisible">
            <el-form :model="menuForm" label-position="left" label-width="80px" :rules="menuForm" ref="menuForm">
                <el-form-item label="菜单名称" prop="name">
                    <el-input v-model="menuForm.name" auto-complete="off" placeholder="请输入名称"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="menuSubmit" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>

        <!--子菜单编辑-->
        <el-dialog title="子菜单" :visible.sync="editFormVisible">
            <el-form :model="menusForm" label-position="left" label-width="80px" :rules="menusFormRules"
                     ref="menusForm">
                <el-form-item label="菜单名称" prop="title">
                    <el-input v-model="menusForm.name" auto-complete="off" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item label="菜单类型" prop="type">
                    <el-select placeholder="请选择" v-model="menusForm.type">
                        <el-option
                                v-for="item in typeList"
                                :key="item.id"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型值" prop="title">
                    <el-input v-model="menusForm.typevalue" auto-complete="off" placeholder="请输入类型值"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="menusForm.open" placeholder="请选择">
                        <el-option
                                v-for="item in statusList"
                                :key="item.id"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="menusSubmit" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<script>
import menu from '@/models/menu'

export default {
  data() {
    return {
      // 图文回复
      tableData: [],
      typeList: [
        {
          id: 'view',
          value: 'view',
          label: '连接',
        },
        {
          id: 'click',
          value: 'click',
          label: '点击',
        },
        {
          id: 'miniprogram',
          value: 'miniprogram',
          label: '小程序',
        },
      ],
      statusList: [
        {
          id: 0,
          value: 0,
          label: '关闭',
        },
        {
          id: 1,
          value: 1,
          label: '开启',
        },
      ],
      loading: true,
      picVisible: false,
      addFormVisible: false, // 新增界面是否显示
      addLoading: false,
      menusFormRules: {
        name: [
          {
            required: true,
            message: '请输入菜单名称',
            trigger: 'blur',
          },
        ],
        typevalue: [
          {
            required: true,
            message: '请输入类型值',
            trigger: 'blur',
          },
        ],
      },
      // 底部菜单数据
      menuForm: {
        id: 0,
        name: '',
      },
      editFormVisible: false, // 修改展示
      // 新增界面数据
      menusForm: {
        id: 0,
        name: '',
        type: 'view',
        open: 1,
        typevalue: '',
      },
    }
  },
  mounted() {
    this.getMenuList()
  },
  methods: {
    // 生成菜单
    createMenus() {
      const _this = this
      _this.$confirm('是否生成菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          this.addLoading = true
          const res = await menu.createMenu()
          if (res.errcode === 0) {
            this.addLoading = false
            this.$message.success('生成成功')
          } else {
            this.addLoading = false
            this.$message.error(`${res.errmsg}`)
          }
        })
    },
    // 获取菜单列表
    async getMenuList() {
      const list = await menu.getMenuList()
      this.loading = false
      this.tableData = list
    },
    handleMenu(index, row) {
      const _this = this
      _this.menuForm = {
        name: row.name,
        id: row.id,
      }
      _this.addFormVisible = true
    },
    async menuSubmit() {
      this.addLoading = true
      const res = await menu.updateMenu({
        id: this.menuForm.id,
        name: this.menuForm.name,
      })
      if (res.error_code === 0) {
        this.addLoading = false
        this.addFormVisible = false
        this.getMenuList()
        this.$message.success(`${res.msg}`)
      }
    },
    handleMenus(index, row) {
      const _this = this
      _this.menusForm = {
        name: row.name,
        type: row.type,
        open: row.open,
        typevalue: row.typevalue,
        id: row.id,
      }
      _this.editFormVisible = true
    },
    async menusSubmit() {
      this.addLoading = true
      const info = {
        id: this.menusForm.id,
        name: this.menusForm.name,
        type: this.menusForm.type,
        open: this.menusForm.open,
        typevalue: this.menusForm.typevalue,
      }
      try {
        // eslint-disable-next-line no-unused-vars
        const res = await menu.updateMenus(info)
        if (res.error_code === 0) {
          this.addLoading = false
          this.editFormVisible = false
          this.getMenuList()
          this.$message.success(`${res.msg}`)
        }
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>
